<template>
  <div class="search-suggestion">
    <van-cell
      v-for="(item, ind) in options"
      :key="ind"
      icon="search"
      @click="$emit('searchFn', item)"
    >
      <span slot="title" v-html="highText(item)"></span>
    </van-cell>
  </div>
</template>

<script>
import { getSuggestionsAPI } from '@/api/index'
import { debounce } from 'lodash'
export default {
  name: 'suggestionIndex',
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      options: []
    }
  },
  watch: {
    searchText: {
      // 设置马上一加载数据即进行处理
      immediate: true,
      // 防抖函数，在200毫秒内数据改变都不会执行回调函数
      handler: debounce(function (val) {
        this.getSuggestions(val)
      }, 200)
    }
  },
  methods: {
    async getSuggestions (val) {
      try {
        const { data: res } = await getSuggestionsAPI({
          q: val
        })
        // console.log(res)
        this.options = res.data.options
      } catch (error) {
        this.$toast('联想建议数据获取失败,请稍后重试')
      }
    },
    // 将符合条件的文本高亮显示
    highText (text) {
      // 字符串replace方法实现，利用正则表达式
      // str.replace(/yysd/gi,'ooooo'); // 正则表达式// 之间均为匹配字符
      // new RegExp():可根据变量动态生成正则表达式,
      // :参数1： 需要匹配的字符串变量
      // :参数2: 匹配模式字符串
      const reg = new RegExp(this.searchText, 'gi')
      return text.replace(
        reg,
        `<span style="color:#4997fd">${this.searchText}</span>`
      )
    }
  }
}
</script>

<style></style>
